@x: 28.125rem;
@mainColor: #000000;
@cW: #ffffff;
@c3: #333333;
@c6: #666666;
@c9: #999999;
.w(@v: 0) {
    width: @v/@x;
}

.h(@v: 0) {
    height: @v/@x;
}

.bc(@v: #000) {
    background-color: @v;
}

.bs(@w, @h) {
    background-size: @w/@x @h/@x;
}

.bp(@w, @h) {
    background-position: @w/@x @h/@x;
}

.br(@v) {
    border-radius: @v/@x;
}

.c(@v: #000) {
    color: @v;
}

.mt(@v) {
    margin-top: @v/@x;
}

.mr(@v) {
    margin-right: @v/@x;
}

.mb(@v) {
    margin-bottom: @v/@x;
}

.ml(@v) {
    margin-left: @v/@x;
}

.p(@t: 0, @r: 0, @b: 0, @l: 0) {
    padding: @t/@x @r/@x @b/@x @l/@x;
}

.m(@t: 0, @r: 0, @b: 0, @l: 0) {
    margin: @t/@x @r/@x @b/@x @l/@x;
}

.pt(@v) {
    padding-top: @v/@x;
}

.pr(@v) {
    padding-right: @v/@x;
}

.pb(@v) {
    padding-bottom: @v/@x;
}

.pl(@v) {
    padding-left: @v/@x;
}

.fs(@v: 24) {
    font-size: @v/@x;
}

.t(@v: 0) {
    top: @v/@x;
}

.r(@v: 0) {
    right: @v/@x;
}

.b(@v: 0) {
    bottom: @v/@x;
}

.l(@v: 0) {
    left: @v/@x;
}

.lh(@v: 0) {
    line-height: @v/@x;
}

.bdr(@v) {
    border-radius: @v/@x;
}

.bdr2(@v, @q, @w, @e) {
    border-radius: @v/@x, @q/@x, @w/@x, @e/@x;
}

.bgs(@v, @m) {
    background-size: @v/@x, @m/@x;
}

.bgp(@v, @m) {
    background-position: @v/@x, @m/@x;
}

.ti(@v) {
    text-indent: @v/@x;
}

.dn() {
    display: none;
}

.db() {
    display: block;
}

.dib() {
    display: inline-block;
}

.di() {
    display: inline;
}

.pr() {
    position: relative;
}

.pa() {
    position: absolute;
}

.pf() {
    position: fixed;
}

.bn() {
    border: none;
}

.utn() {
    outline: none;
}

.fl() {
    float: left;
}

.fr() {
    float: right;
}

.tc() {
    text-align: center;
}

.tr() {
    text-align: right;
}

.fwn() {
    font-weight: normal;
}

.oh() {
    overflow: hidden;
}

.lstn() {
    list-style-type: none;
}

.tdn() {
    text-decoration: none;
}

.tdu() {
    text-decoration: underline;
}